/**
 * Created by shaotingzhou on 2017/5/17.
 */

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    ListView,
    Image,
    TouchableOpacity,
    Platform,
    Dimensions,
    RefreshControl,
} from 'react-native';
var {width,height} = Dimensions.get('window');
let dataAry = [1,2,3,4,5,1,2,3,4,5]
var ds = new ListView.DataSource({rowHasChanged:(r1,r2) => r1 !== r2});
export default class Money extends Component{
    // 构造
    constructor(props) {
        super(props);
        // 初始状态
        this.state = {
            show:true,     //钱数是否显示标示
            showNumber:'222',   //显示的钱数
            number:'222',     //钱数
            dataSource: ds.cloneWithRows(dataAry),
            isRefreshing:true

        };
    }
    render() {
        return (
            <View>
                {/*上*/}
                <View style={{flexDirection:'row',justifyContent:'space-between',alignItems:'center',backgroundColor:'rgba(38,198,218,1.0)',height:50}}>
                    <Text style={{color:'white',marginLeft:5,fontWeight:'bold',fontSize:16}}>履约收入合计:  {this.state.showNumber} 元</Text>
                    <TouchableOpacity onPress={()=>this.showNumber()}>
                        <Image source={ this.state.show == true ? require('../../../image/眼睛.png') : require('../../../image/闭眼.png')} style={{width: 25,height: 25,marginRight:5}}/>
                    </TouchableOpacity>
                </View>

                <ListView
                    dataSource={this.state.dataSource}
                    renderRow={this.renderRow}
                    enableEmptySections={true}  //去除警告
                    refreshControl={
                        <RefreshControl
                            refreshing={this.state.isRefreshing}
                            onRefresh={()=>this.onRefreshData()}
                        />
                    }
                />
            </View>
        );
    }

    //是否显示钱数
    showNumber =()=>{
        this.setState({
            show:!this.state.show
        })

        if(this.state.show == false){
            this.setState({
                showNumber:this.state.number
            })
        }else {
            this.setState({
                showNumber:'XXXX'
            })
        }
    }

    //listView的renderRow
    renderRow =(rowData,sectionID,rowID,highlightRow) =>{

        return(
            <View style={{borderWidth:1,marginBottom:5,marginLeft:8,marginRight:8,borderColor:'#DEDEDE',backgroundColor:'white'}}>
                <Text style={{fontSize:16,marginLeft:5,marginTop:5}}>歌曲: 十年</Text>
                <View style={{marginTop:15,marginBottom:15,marginLeft:5}}>
                    <Text style={{fontSize:14,color:'#BDBDBD'}}>歌手: 陈奕迅</Text>
                    <Text style={{fontSize:14,color:'#BDBDBD'}}>在线购买次数: 99次</Text>
                </View>
                <View style={{position:'absolute', right:5,top:5}}>
                    <Image source={require('../../../image/标签.png')} style={{width:95,height:25}}/>
                    <Text style={{fontSize:14, backgroundColor:'rgba(255,255,255,0.0)',color:'white',position:'absolute', right:0,top:5}}>金额: 122345</Text>
                </View>
            </View>
        )
    }

    //请求数据
    componentDidMount(){
        this.setState({
            isRefreshing:false
        })
    }
    //刷新数据
    onRefreshData =()=>{

    }

};


var styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#F5FCFF',
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
    instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
    }
});

